<template>
	<view>
		<u-navbar :autoBack="true" bgColor="#2D3036" :placeholder="true" leftIconColor="#fff">
			<view class="navnar-title" slot="center">輸入新密碼</view>
		</u-navbar>
		
		<view class="form">
			<view class="form-item">
				<view class="item-icon">
					<image src="/static/images/phone.png" mode="widthFix" class="img"></image>
				</view>
				<view class="item-input">
					<input type="number" v-model="formData.mobile" class="inp" placeholder="請輸入聯繫方式" placeholder-class="place-class" />
				</view>
			</view>
			
			<view class="form-item row-reverse">
				<view class="item-icon text" @click="getCaptcha">
					<view class="captcha-text">{{captchaText}}</view>
				</view>
				<view class="item-input">
					<input type="number" maxlength="4" v-model="formData.code" class="inp" placeholder="輸入短信驗證碼" placeholder-class="place-class" />
				</view>
			</view>
			
			<view class="form-item">
				<view class="item-icon">
					<image src="/static/images/pass.png" mode="widthFix" class="img"></image>
				</view>
				<view class="item-input">
					<input type="password" v-model="formData.password" class="inp" placeholder="輸入密碼" placeholder-class="place-class" />
				</view>
			</view>
			
			<view class="form-item">
				<view class="item-icon">
					<image src="/static/images/tag.png" mode="widthFix" class="img"></image>
				</view>
				<view class="item-input">
					<input type="password" v-model="formData.newPassword" class="inp" placeholder="再次輸入密碼" placeholder-class="place-class" />
				</view>
			</view>
			
			<view class="submit-btn" @click="submitConfirm">完成</view>
		</view>
	</view>
</template>

<script>
	import {getPassSms} from '@/api/sms.js';
	import {forgotPass} from '@/api/login.js';
	export default {
		data() {
			return {
				formData: {
					mobile: '',
					code: '',
					password: '',
					newPassword: ''
				},
				countDown: 0,
				countDownIntervalIndex: null
			};
		},
		computed: {
			captchaText() {
				return this.countDown <= 0 ? '獲取動態碼' : `已發送(${this.countDown}s)`;
			}
		},
		onUnload() {
			this.cleatCountDownInterval();
		},
		methods: {
			async submitConfirm() {
				try{
					let formData = this.formData;
					if (!formData.mobile || formData.mobile.length < 5) {
						throw new Error('请填写正确的电话号码');
					}
					if (!formData.code) {
						throw new Error('请填写短信验证码');
					}
					if (!formData.password) {
						throw new Error('请填写密码');
					}
					if (formData.newPassword !== formData.password) {
						throw new Error('两次填写密码不一致');
					}
					delete formData.newPassword;
					await forgotPass(formData);
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				}catch(e){
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			},
			cleatCountDownInterval() {
				this.countDown = 0;
				if (this.countDownIntervalIndex !== null) {
					clearInterval(this.countDownIntervalIndex);
					this.countDownIntervalIndex = null;
					this.countDown = 0;
				}
			},
			async getCaptcha() {
				try{
					if (this.countDownIntervalIndex !== null) {
						return;
					}
					if (!this.formData.mobile) {
						uni.showToast({
							title: '请输入电话号码',
							icon: 'none'
						});
						return;
					}
					if (this.formData.mobile.length !== 11) {
						uni.showToast({
							title: '请输入正确的电话号码',
							icon: 'none'
						});
						return;
					}
					await getPassSms(this.formData.mobile);
					this.countDown = 59;
					this.countDownIntervalIndex = setInterval(() => {
						this.countDown--;
					}, 1000);
					setTimeout(this.cleatCountDownInterval, 59000);
				}catch(e){
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			},
			loginAccout() {
				uni.redirectTo({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style lang="scss">
	.navnar-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: 400;
	}
	
	.form {
		padding: 265rpx 120rpx 30rpx 120rpx;
		width: 100%;
		box-sizing: border-box;
		
		.default-avatar {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 100rpx;
			
			.img {
				width: 184rpx;
				height: 184rpx;
			}
		}
		
		.form-item {
			width: 100%;
			margin-bottom: 22rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.item-icon {
				height: 83rpx;
				border-radius: 83rpx 0 0 83rpx;
				background-color: #24272D;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 20rpx;
				
				.img {
					width: 40rpx;
					height: 40rpx;
				}
				
				.captcha-text {
					width: 150rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			
			.item-icon.text {
				color: #FFFEFE;
				font-weight: 400;
				font-size: 26rpx;
			}
			
			.item-input {
				flex: 1;
				height: 88rpx;
				background: #FFFFFF;
				border: 1rpx solid rgba(255, 255, 255, 0.2);
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.12);
				border-radius: 6rpx 44rpx 44rpx 6rpx;
				box-sizing: border-box;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				z-index: 5;
				padding: 10rpx 17rpx;
								
				.inp,
				.place-class {
					color: #C8C8C8;
					font-size: 24rpx;
					font-weight: 400;
					text-align: left;
				}
				
				.inp {
					width: 100%;
					height: 100%;
					color: #333;
				}
			}
		}
		
		.form-item.row-reverse {
			flex-direction: row-reverse;
			
			.item-icon {
				border-radius: 0 83rpx 83rpx 0;
			}
			
			.item-input {
				border-radius: 44rpx 6rpx 6rpx 44rpx;
			}
		}
	}

	.forgot {
		padding-top: 97rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		
		.forgot-btn {
			color: #387EFF;
			font-size: 20rpx;
			font-weight: 400;
		}
	}

	.submit-btn {
		margin-top: 172rpx;
		width: 100%;
		height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 38rpx;
		background-color: #EB3434;
		color: #fff;
		font-size: 36rpx;
		font-weight: 400;
	}
	
	.register {
		padding-top: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.register-btn {
			color: #387EFF;
			font-size: 20rpx;
			font-weight: 400;
			text-decoration: underline;
		}
	}
</style>
